// 时速分布统计 柱状图
<template>
    <div class="other-driver-data item-container" id="OtherData"></div>
</template>

<script>
    export default {
        name:'OtherData',
        data () {
            return {
                //示例数据
                category : ['1', '2', '3', '4', '5', '6', '7'],
                barData : [100, 200, 300, 400, 500, 600, 700]
            }
        },
        mounted: function() {
            this.drawPieOnline();
        },
        methods: {
            drawPieOnline() {
                //示例数据
                var OtherDataChart = this.$echarts.init(document.getElementById("OtherData"));
                var OtherDataOption = null;
                OtherDataOption = {
                    title:{
                        show:false
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '5%',
                        right: '5%',
                        bottom: '5%',
                        top:'5%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {show: false},
                        axisLabel: {
                            show: true,
                            textStyle: {
                            color: '#18cdf2'   //这里用参数代替了
                            },
                            fontSize:10
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data: this.category,
                        splitLine: {show: false},
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        offset: 10,
                        nameTextStyle: {
                            fontSize: 15
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                            color: '#18cdf2'   
                            },
                            fontSize:10
                        }
                    },
                    series: [
                        {
                            name: '设备数',
                            type: 'bar',
                            data: this.barData,
                            barWidth: 14,
                            barGap: 10,
                            smooth: true,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'right',
                                    offset: [5, -2],
                                    textStyle: {
                                        color: '#56c9e8',
                                        fontSize: 13
                                    }
                                }
                            },
                            itemStyle: {
                                emphasis: {
                                    barBorderRadius: 7
                                },
                                normal: {
                                    barBorderRadius: 7,
                                    color: "#56c9e8"
                                }
                            }
                        }
                    ]
                };
                const userInfo = JSON.parse(localStorage.getItem("userInfo"));
                $.ajax({
                    url: this.global.DeviceSpeedStat + "?appKey=" + userInfo.appKey,  //接口地址，配置在全局 golbal.vue文件
                    dataType: "json",
                    type: "GET",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    success: function(res) {
                        if(res.success == true && res.code == 200){
                            OtherDataOption.yAxis.data = res.data.speedArr;
                            OtherDataOption.series[0].data = res.data.deviceCountArr;
                             OtherDataChart.setOption(OtherDataOption, true);
                        }
                        else{
                            console.log("获取图表信息失败");
                        }
                    },
                    complete: function(res) {
                        console.log("完成");
                    },
                    error: function(res) {
                        console.log("获取图标信息失败");
                    }
                });



                //做个标记
                // if (OtherDataOption && typeof OtherDataOption === "object") {
                //     OtherDataChart.setOption(OtherDataOption, true);
                // }
            }
        },
    }
</script>

<style scoped>

</style>